<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="__ROOT__/Public/Admin/shortcut icon" href="favicon.ico">
	<link href="__ROOT__/Public/Admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="__ROOT__/Public/Admin/css/animate.css" rel="stylesheet">
	<link href="__ROOT__/Public/Admin/css/style.css?v=4.1.0" rel="stylesheet">
	
	<link href="__ROOT__/Public/Admin/js/plugins/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet" />
	<link href="__ROOT__/Public/Admin/js/plugins/bootstrap221/css/editable.css" rel="stylesheet" />
	<link href="__ROOT__/Public/Admin/js/plugins/sweetalert/sweetalert.css" rel="stylesheet">
	
	<style>
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	height:35px;
}


	.loading{
			 width: 35px;
			 height: 35px;
			 margin: 0 auto;
			 margin-top:100px;
			 position: fixed;
			 top: 0px;
			 left: 0px;
			 right: 0px;
			 bottom: 0px;
			 margin: auto;
		}


<php> 
    $i = 1;
	foreach($dict AS $k => $v){
		echo ".Status".$i.$v[ID]."{background-color:#ff4b07;}";
		$i++;
	}
</php>
	.StatusEnd1{
		background-color:#ff4b07;
	}
	.StatusEnd2{
		background-color:#ffffff;
	}
	</style>
	
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <table class="table table-bordered table-striped text-center" data-mobile-responsive="true">
                    <thead>
                    </thead>
                    <tbody>

                        <tr style="background-color:#305cf1 !important; color:#FFFFFF;" >
                            <td rowspan="2" style="width:5%">序号</td>
                            <td rowspan="2">项目/方案名称</td>
                            <td rowspan="2">起止时间</td>
							<td rowspan="2">项目负责人</td>
							<td rowspan="2">项目团队</td>
							<td colspan="3">状态</td>
                            <td rowspan="2">项目执行进展情况（月）</td>
                        </tr>
						<tr style="background-color:#305cf1 !important; color:#FFFFFF;" >
                            <td>已做</td>
                            <td>在做</td>
							<td>拟做</td>
                       </tr>
                       	<tr id="toptr"></tr>
                        <tr style="background-color:#ececec;" id="">
							<td colspan="10" >  
								<a onclick="additem(this)">添加一条记录</a>
							</td>
						</tr>
                	</tbody>
          		</table>
            </div>
        </div>
    </div>
<img src="__ROOT__/Public/Admin/img/loading.gif" class="loading" style="display:none;">	
</body>
<script src="__ROOT__/Public/Admin/js/jquery.min.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/laydate/laydate.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/bootstrap221/js/bootstrap.min.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/sweetalert/sweetalert.min.js"></script>
	
<link href="__ROOT__/Public/Admin/css/selector/selectorstyle.css" rel="stylesheet"/>
<script src="__ROOT__/Public/Admin/js/plugins/selector/selector.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/selector/jquery.ztree.all.js"></script>
<script>
	var projectID = 0;
	<?php if(!empty($id)){echo "projectID = ".$id.";";}?>
	var status1 = {$dict[0]['ID']};
	var status2 = {$dict[1]['ID']};
	var status3 = {$dict[2]['ID']};
	var projectName = '{$projectName}';
	var ChargeUserName = '{$ChargeUserName}';
	var projectMember = '{$projectMember}';
	var i = 1;
	var j = 1;
	
	$.post("<?=U('Admin/ProjectMonth/save',array('type'=>'table','id'=>$id))?>",{},function(result){
		data = result;
		var itmeHtml = "";
		for(var list in data.data){
			j++;
			itmeHtml = "<tr id="+data.data[list].ID+" style=\"background-color:#FFFFFF\"><td>"+(i++)+"</td><td>"+data.data[list].projectName+"</td><td class='ReportMonth"+j+"'>"+data.data[list].ReportMonth+"</td><td>"+data.data[list].ChargeUserName+"</td><td>"+data.data[list].team+"</td><td onclick='setStatus(this,"+status1+")' class='Status1"+data.data[list].Status+"'></td><td onclick='setStatus(this,"+status2+")' class='Status2"+data.data[list].Status+"'></td><td onclick='setStatus(this,"+status3+")' class='Status3"+data.data[list].Status+"'></td><td><div class='Content"+j+" myeditable'>"+data.data[list].Content+"</div></td><td style='display:none'></td></tr>";
			$("#toptr").before(itmeHtml);
			TieEvent();
		}
		
	});
	
	function additem(dom){
		var ReportMonth = getNowFormatDate("Y-h");
			j++;
			var newhtml = "<tr style=\"background-color:#FFFFFF\"><td>"+($("tr").length - 3)+"</td><td>"+projectName+"</td><td class='ReportMonth"+j+"'>"+ReportMonth+"</td><td>"+ChargeUserName+"</td><td>"+projectMember+"</td><td onclick='setStatus(this,"+status1+")'></td><td onclick='setStatus(this,"+status2+")'></td><td onclick='setStatus(this,"+status3+")'></td><td><div class='Content"+j+" myeditable'><div></td><td style='display:none'></td></tr>";
		  	$(dom).parent().parent().before(newhtml);
	     	$(dom).text("点击保存");
		 	$(dom).attr('onclick', '');
			$(dom).attr('onclick', "tableAddData(this)");
			TieEvent();
	}
	
	function tableAddData(dom){
		var tr = $(dom).parent().parent().prev().children();
		data = {
			"ProjectID" : projectID,
	 		"ReportMonth" : $(tr[2]).text(),
	 		"Status" : $(tr[9]).text(),
		 	"Content" : $(tr[8]).text()
	 	};
	 	$.post("{:U('Admin/ProjectMonth/save')}&type=add",data,function(result){
			if (result.status) {
			    swal({
			        title: "继续操作？",
			        text: "操作成功！",
			        type: "success",
			        showCancelButton: false,
			        confirmButtonColor: "#DD6B55",
			        confirmButtonText: "确认",
			        cancelButtonText: "",
			        closeOnConfirm: false,
			        closeOnCancel: false
			    },function (isConfirm) {
			        document.location.reload();
			    });			
			}else{
			    swal("提示", result.info, "error");
			}
		});

	}
	
	function setStatus(dom,status){
		var tr = $(dom).parent().children();
		$(tr[5]).attr("class","StatusEnd2");
		$(tr[6]).attr("class","StatusEnd2");
		$(tr[7]).attr("class","StatusEnd2");
		$(tr[9]).text(status);
		$(dom).attr("class","StatusEnd1");
		var TR = $(dom).parent();
		if($(TR).attr("id") == undefined) return;
	    var timeid = $(TR).attr("id");
	 	var updatedata = {
		 	"Status": status,
			"ID": timeid
		}
	 	tableUpdate(updatedata);
	}
	
	function TieEvent(){
		
		laydate.render({
		  elem: '.ReportMonth'+j
		  ,type: 'month'
		  ,done:function(value,date){
			var tr = $(this.elem).parent();
		        if($(tr).attr("id") == undefined) return;
		        var timeid = $(tr).attr("id");
		    	var updatedata = {
					"ReportMonth": value,
					"ID": timeid
		 		}
	 			tableUpdate(updatedata);
			}
		});
		
		$('.Content'+j).editable({ 
	        type: "textarea",             
	        title: "项目执行进展情况（月）",           
	        disabled: false,
	        emptytext: "",
	        mode: "popup",          
	        validate: function (value) { //字段验证
	            if (!$.trim(value)) {
	                return '不能为空';
	            }else{
	                var tr = $(this).parent().parent();
	                if($(tr).attr("id") == undefined) return;
	          		var timeid = $(tr).attr("id");
	 				var updatedata = {
						"Content": value,
						"ID": timeid
			 		}
		 			tableUpdate(updatedata);
	           }
	        }
	    });
		
	}
	
		function tableUpdate(updatedata){
			$(".loading").show();
	 		$.post("{:U('Admin/ProjectMonth/save')}&type=update",updatedata,function(result){
	 			$(".loading").hide();
	 			if (result.status) {
			       swal("提示", result.info, "success");
			    }else{
			    	swal({
			            title: "",
			            text: "修改失败 "+result.info,
			            type: "error",
			            showCancelButton: false,
			            confirmButtonColor: "#DD6B55",
			            confirmButtonText: "确认",
			            cancelButtonText: "",
			            closeOnConfirm: false,
			            closeOnCancel: false
			        },function (isConfirm) {
			            document.location.reload();
			        });		
			    }
	 		});
		}
	
	
		function getNowFormatDate(type) {
		    var date = new Date();
		    var seperator1 = "-";
		    var seperator2 = ":";
		    var month = date.getMonth() + 1;
		    var strDate = date.getDate();
		    if (month >= 1 && month <= 9) {
		        month = "0" + month;
		    }
		    if (strDate >= 0 && strDate <= 9) {
		        strDate = "0" + strDate;
		    }
		    if(type == "date"){
		    	var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
		    }else if(type == "time"){
		    	var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
		            + " " + date.getHours() + seperator2 + date.getMinutes()
		            + seperator2 + date.getSeconds();
		    }else if(type == "Y-h"){
		    	var currentdate = date.getFullYear() + seperator1 + month;
		    }
		    return currentdate;
		}
	
</script>
</html>